<template>
	<view class="selectTime">
		<template v-for="(item,index) in list.time">
			<view :key="index" @click="selectTime(item,index)" class='selectTime-item busyHour-active' v-if="item.is_busy_time">
				<view class="">
					{{item.start_time}}
				</view>
				<view v-if="item.is_busy_time" class="line line-busyHour-active">
					<view class="busy">
						<image :src="imgUrl+'images/mineImg/busy.png'" mode=""></image>
					</view>

				</view>
				<view v-else :class="!item.is_service_time?'line':'line line-active'">
				</view>
				<view class="">
					{{item.end_time}}
				</view>
			</view>
			<view @click="selectTime(item,index)" :key="index" v-else
				:class="!item.is_service_time?' selectTime-item':'selectTime-item selectTime-item-active' ">
				<view class="">
					{{item.start_time}}
				</view>

				<view :class="!item.is_service_time?'line':'line line-active'">
				</view>
				<view class="">
					{{item.end_time}}
				</view>
			</view>

		</template>

	</view>
</template>

<script>
	export default {
		/* props:{
			riqi:{}
		}, */
		data() {
			return {
				imgUrl: this.$store.state.imgUrl,
				list: [
					
				],
				selectTimeData:[],
				riqi:'',
				time:'',
				zt:''
			}
		},
		onLoad() {
			this.init2()
		},
		methods: {
			init(a){
				console.log(a,'///**');
				this.list=a 
					this.init2()
			
			},
			init2(){
				/* uni.showLoading({title:'加载中'}) */
				this.$db.http('technician/busy/time').then(res => {
					if(res){
						console.log(res,'99999999');
					}
				})
			},
			selectTime(item,i) {
				
				let status ='add'
				if(item.is_service_time){ uni.showToast({title:'服务时间段，不可设置',icon:'none'}); return}
				if(item.is_busy_time){status='delete' }
					console.log(item,111)
					console.log(item,this.list)
				let data = {
					time_number: item.number,
					type: status,
					date:this.list.date
				}
				/* uni.showLoading({title:'加载中'}) */
				this.$db.http('technician/busy/time/set',data).then(res => {
					
					if(res){
					
						uni.showToast({
							icon:'none',
							title:'设置成功',
							});
						setTimeout(() => {
							/* this.$router.go(0) */
							/* uni.redirectTo({
								url:'/page-index-subcontract/busyHourSetting/busyHourSetting'
							}) */
							
							 this.$emit( 'clickBrotherBtn')
						
							
							/* console.log(this.$emit("send"),'***-*-'); */
					
						}, 500)
					}
					
				})
			}
		}
	}
</script>

<style lang="less">
	.selectTime {
		display: flex;
		flex-wrap: wrap;
		flex-shrink: 0;
		padding:8rpx 0 20rpx 16rpx;

		.selectTime-item {
			position: relative;
			width: 124rpx;
			height: 160rpx;
			border: 2rpx solid #E4E4E4;
			background: #fff;
			border-radius: 16rpx;
			margin-left: 14rpx;
			margin-top: 16rpx;
			color: #262626;
			font-size: 28rpx;
			font-weight: 400;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.line {
				width: 1rpx;
				height: 30rpx;
				background: #262626;
				margin: 4rpx 0;
			}

			.line-active {
				background: #46D17E;
			}

			.line-busyHour-active {
				background: #FFB83C;

				.busy {
					position: absolute;
					bottom: 0;
					right: -1rpx;
					width: 32rpx;
					height: 26rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.selectTime-item-active {
			width: 120rpx;
			height: 160rpx;
			border: 2rpx solid #46D17E;
			background: #E8FAEF;
			color: #46D17E;
		}

		.busyHour-active {
			border-color:#FFB83C;
			background: #FFFAEF;
			color: #FFB83C;
		}
	}
</style>
